import { appLocalStorage, Box, getClassNames, Icon, Page } from '@/components';
import { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { exemplesNameList } from '../../routes/index';
import styles from './styles.module.less'
import wave from './wave.svg'
const Home = () => {
  const navigate = useNavigate();
  const [theme, setTheme] = useState('');
  useEffect(() => {
    setTheme(appLocalStorage.getValue('theme') ?? '')
  }, [])
  return (
    <Page pageBody={{ padding: false }} className={styles.home}>
      <img className={styles.wave} src={wave} alt="svg" />
      <div className={styles.page}>
        <div className={styles.content}>
          <div className={styles.title}>
            <h1>
              Magic UI React
            </h1>
            <p>基于React开发的灵活可拓展的UI框架</p>
          </div>
          <div className={styles.cards}>
            <Box type='blur' blur={20} shadowShow="always" className={styles.card}>
              <h4>自定义</h4>
              <div className={styles.card1}>
                <p>
                  个人独立开发，代码风格具有统一标准。
                </p>
                <p>
                  项目完全开源，可通过npm(yarn)等包管理工具免费使用。
                </p>
                <p>组件样式单独存放，可单独自定义替换。</p>
              </div>
            </Box>
            <Box type='blur' blur={20} shadowShow="always" className={styles.card}>
              <h4>主题切换</h4>
              <div className={styles.theme}>
                <div
                  className={getClassNames([
                    styles.themeDarkbtn,
                    {
                      [styles.themebtnChecked]: theme === 'dark'
                    }
                  ])}
                  onClick={() => {
                    document.querySelector('body')?.setAttribute('theme', 'dark')
                    appLocalStorage.setValue('theme', 'dark')
                    setTheme('dark')
                  }}
                >
                  <Icon size={40} icon={'moon'} />
                  <span>
                    深色
                  </span>
                </div>
                <div
                  onClick={() => {
                    document.querySelector('body')?.setAttribute('theme', 'light')
                    appLocalStorage.setValue('theme', 'light')
                    setTheme('light')
                  }}
                  className={getClassNames([
                    styles.themeLightbtn,
                    {
                      [styles.themebtnChecked]: theme === 'light'
                    }
                  ])}
                >
                  <Icon size={40} icon={'sun'} />
                  <span>
                    浅色
                  </span>
                </div>
              </div>
            </Box>
            <Box type='blur' blur={20} shadowShow="always" className={styles.card}>
              <h4>低耦合</h4>
              <div className={styles.card1}>
                <p>
                  每个组件为独立的一部分，不通过npm(yarn)等包管理器下载，也可以通过复制组件单独文件夹进行使用
                </p>
                <p>
                  每个组件之间互不干扰，避免造成修改当然组件影响其他组件。
                </p>
                <p>绝大部分组件功能都是通过自定义代码实现，极少使用第三方库，避免在复制使用时导入过多依赖。</p>
              </div>
            </Box>
          </div>
        </div>
      </div>
    </Page >
  )
}
export default Home